<template>
  <div class="singer_list">
    <mt-cell
      v-for="(item,index) in list"
      :to="`/singer/info/${item.singerid}`"
      is-link
      :title="item.singername"
      :key="index"
    >
      <img slot="icon" :src="item.imgurl.replace('{size}', '400')" width="60" height="60">
    </mt-cell>
    
  </div>
</template>

<script>
import {getList} from "@/api"
import { Indicator } from 'mint-ui'
export default {
  data() {
    return {
      list: []
    }
  },
    beforeRouteEnter(to, from, next){
      next(vm=> {
        console.log("点击进入")
        vm.$store.commit('showHead', true)
<<<<<<< HEAD
        vm.$store.commit('setHeadStyle', {'background': '#fff','box-shadow':'0 3px 3px 0 #f4f4f4'})
=======
        vm.$store.commit('setHeadStyle', {'background': '#2CA2F9'})
>>>>>>> 7dd98ad4f10b0d0fc1a7994a24c127972341b2d9
        vm.getlist();
      })
    },
    beforeRouteLeave(to, from, next){
      console.log('点击离开')
      this.$store.commit('showHead', false)
      this.$store.commit('resetHeadStyle')
      next()
    },
  methods: {
    getlist() {
      Indicator.open({
          text: '客官请稍等...',
          spinnerType: 'snake'
        });
      var singerID = this.$route.params.id;
      getList(singerID)
            .then(({ data }) => {
            Indicator.close()
            this.list = data.singers.list.info;
            console.log(data.classname)
            this.$store.commit("setHeadTitle", data.classname);
       
        });
    }
  }
};
</script>

<style>
	.singer_list .mint-cell-title img {
    margin: 10px;
    margin-left: 0
  }
  .mint-cell{
    padding:0
  }
</style>